import { Table } from "antd";
// import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';

const useStyle = createStyles(({ css }) => {
    return {
      customTable: css`
        .ant-table {
          .ant-table-container {
            .ant-table-body,
            .ant-table-content {
              scrollbar-width: thin;
              scrollbar-color: #eaeaea transparent;
              scrollbar-gutter: stable;
            }
          }
        }
      `,
    };
  });

interface RPATableProps {
    content: string;
}

// interface DataType {
//     key: React.Key;
//     name: string;
//     age: number;
//     address: string;
//   }
  
  // const columns: TableColumnsType<DataType> = [
  //   { title: 'Column 1', dataIndex: 'address', key: '1' },
  //   { title: 'Column 2', dataIndex: 'address', key: '2' },
  //   { title: 'Column 3', dataIndex: 'address', key: '3' },
  //   { title: 'Column 4', dataIndex: 'address', key: '4' },
  //   { title: 'Column 5', dataIndex: 'address', key: '5' },
  //   { title: 'Column 6', dataIndex: 'address', key: '6' },
  //   { title: 'Column 7', dataIndex: 'address', key: '7' },
  //   { title: 'Column 8', dataIndex: 'address', key: '8' },
  //   { title: 'Column 9', dataIndex: 'address', key: '9' },
  //   { title: 'Column 10', dataIndex: 'address', key: '10' },
  //   { title: 'Column 11', dataIndex: 'address', key: '11' },
  //   { title: 'Column 12', dataIndex: 'address', key: '12' },
  //   { title: 'Column 13', dataIndex: 'address', key: '13' },
  //   { title: 'Column 14', dataIndex: 'address', key: '14' },
  //   { title: 'Column 15', dataIndex: 'address', key: '15' },
  //   { title: 'Column 16', dataIndex: 'address', key: '16' },
  //   { title: 'Column 17', dataIndex: 'address', key: '17' },
  //   { title: 'Column 18', dataIndex: 'address', key: '18' },
  //   { title: 'Column 19', dataIndex: 'address', key: '19' },
  //   { title: 'Column 20', dataIndex: 'address', key: '20' },
  // ];
  
  // const dataSource: DataType[] = [
  //   { key: '1', name: 'Olivia', age: 32, address: 'New York Park' },
  //   { key: '2', name: 'Ethan', age: 40, address: 'London Park' },
  // ];

export default function RPATable({content}: RPATableProps) {

    const dataSource = JSON.parse(content);
    
    let columns = [];

    for (let key in dataSource[0]) {
        if (dataSource[0].hasOwnProperty(key)) { // 确保是对象自身的属性
            let dic = {
            title: key,
            dataIndex: key, // 修正拼写错误
            key: key,
            };
            columns.push(dic);
        }
    }
    // console.log(content)

    const { styles } = useStyle();
    return(<Table 
        className={styles.customTable}
        dataSource={dataSource} 
        columns={columns} 
        pagination={false} 
        bordered={true}
        scroll={{ x: 'max-content' }}
    />)

}